<template>
	<view class="hot-topic">
		<view class="f-jsb top">
			<view>热门分类</view>
			<view class="f-ajc" @tap="toTopicList">更多 > </view>
		</view>
		<view class="f detail">
			<view class="f1" v-for="(item,index) in hotList" :key="index">{{item.cat}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				hotList: [
					{cat:"最新"},
					{cat:"游戏"},
					{cat:"情感"},
					{cat:"打卡"},
					{cat:"故事"},
					{cat:"喜爱"}
				]
			}
		},
		methods:{
			toTopicList(){
				uni.navigateTo({
					url: '../../pages/top-list/top-list',
				});
			}
		}
	}
</script>

<style scoped>
	.hot-topic {
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid rgba(1,1,2,0.1);
	}
	
	.top > view:first-child {
		font-size: 34rpx;
		font-weight: 700;
	}
	.top > view:last-child {
		font-size: 30rpx;
		color: #DFDEE0;
	}
	
	.top {
		margin-bottom: 20rpx;
	}
	
	.detail > view {
		color: #AEADB3;
		background-color: #F8F2F9;
		padding: 5rpx;
		border-radius: 5rpx;
		margin: 5rpx;
		text-align: center;
	}
	
</style>
